<style src="../../style/statistics.css" scoped></style>
<template>
  <div class="containerTable">
        <Row class="divSearch">
            <Col span="24">
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" inline>
                <Form-item style="display:none;" prop="Id">
                    <Input v-model="dataModel.Id"></Input>
                </Form-item>
                <Form-item label="填报级别" prop="ReportLevel" :label-width="80">
                    <Select v-model="dataModel.ReportLevel" placeholder="请选择填报年度..." style="width:100px">
                        <Option :value="item.DictValue" v-for="item in ReportLevelList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="填报年度" prop="CreateYear" :label-width="70">
                    <Select v-model="dataModel.CreateYear" placeholder="请选择填报年度..." style="width:80px;">
                        <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="所属表" prop="TableCode" :label-width="60">
                    <Select v-model="dataModel.TableCode" placeholder="请选需生成表名称..." style="width:230px;">
                        <Option :value="item.DictValue" v-for="item in TableCodeList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="时间周期" prop="Cycle" :label-width="70">
                    <Select v-model="dataModel.Cycle" placeholder="请选择时间周期..." style="width:80px;">
                        <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Form-item>
                <Form-item v-show="dataModel.Cycle==12||dataModel.Cycle==4" label="周期值" prop="Cycle" :label-width="60">
                    <Select v-show="dataModel.Cycle==12" v-model="dataModel.CycleValue" placeholder="请选择月值..." style="width:100px;">
                        <Option :value="item.DictValue" v-for="item in MonthList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                    <Select v-show="dataModel.Cycle==4" v-model="dataModel.CycleValue" placeholder="请选择季节值..." style="width:100px;">
                        <Option :value="item.DictValue" v-for="item in QuarterList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button icon="archive" type="primary" @click="save('dataModel')">生成报表</Button>
                </Form-item>
            </Form>
            </Col>
        </Row>
        <Row class="divSearch">
            <Col span="24" class="col-margin">
            <!--根据需求删除不不要查询条件-->
            填报年度：
            <Select v-model="searchModel.CreateYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                <Option value="">全部</Option>
                <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            所属表：
            <Select v-model="searchModel.TableCode" placeholder="全部" style="width: 250px" @on-change="getPageData()">
                <Option value="">全部</Option>
                <Option :value="item.DictValue" v-for="item in TableCodeList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            时间周期：
            <Select v-model="searchModel.Cycle" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                <Option value="">全部</Option>
                <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
            </Col>
        </Row>
        <Row>
            <Col span="24" class="col-margin">
            <Table size="small" @on-select="selectSingel" @on-select-all="selectAll" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
        <Row>
            <Col span="24">
            <Page class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ReportLevelList: this.GetGroupDict("ReportLevel"),
            TableCodeList: this.GetGroupDict("ReportTableName"),//表名称
            CreateYearList: this.GetGroupDict("ReportYear"),//周期
            CycleList: this.GetGroupDict("ReportCycle"),//周期
            MonthList: this.GetGroupDict("MonthCycleValue"),//周期值
            QuarterList: this.GetGroupDict("QuarterCycleValue"),
            showType: false,//编辑框弹出状态
            ruleValidate: {//验证模型
                TableCode: [{ required: true, message: '请选择所属表', trigger: 'blur' }],
                CreateYear: [{ required: true, message: '请选择填报年度！', trigger: 'blur' }],
                Cycle: [{ required: true, message: '请选择时间周期！', trigger: 'blur' }],
                ReportLevel: [{ required: true, message: '请选择填报级别！', trigger: 'blur' }]
            },
            dataModel: {//编辑模型
                Id: 0,
                TableCode: '',
                CreateYear: '',
                Cycle: '',
                CreateTime: '',
                ReportLevel: '1'
            },
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                Id: '',
                TableName: '',
                TableCode: '',
                CreateYear: '',
                Cycle: '',
                CreateTime: '',
                PageNumber: 1, PageSize: 20
            },
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            datas: {},//table数据对象
            dataIds: [],
            ctx: this,//table数据上下文
            columnsList: [//表头对象
                // { type: 'selection', width: 60, align: 'center' },//多选设置
                { title: "填报级别", key: "ReportLevelName", width: 100 },
                { title: "报表名称", key: "TableName" },
                { title: "所属表", key: "TableCodeName", width: 200 },
                { title: "填报年度", key: "CreateYearName", width: 100 },
                { title: "时间周期", key: "CycleName", width: 100 },
                { title: "时间周期", key: "CycleValueName", width: 100 },
                { title: "生成时间", key: "StrCreateTime", width: 160 },
                {
                    title: "操作", key: "Id", width: 100, align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                class:{
                                    ideleteColor:true
                                },
                                props: {
                                    size: 'small',
                                    type:'ghost',
                                    icon: 'ios-trash-outline'
                                }, style: {
                                    marginRight: '5px'
                                }, on: {
                                    click: () => {
                                        this.delInfo(params.row.Id)
                                    }
                                }
                            }, '删除'),
                        ]);
                    }
                }],
            clientHeight: window.innerHeight - 345,//表格默认高度
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 345;
            })()
        };
    },
    methods: {
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            self.$http.post('GenerateLog/PostPageList', this.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        //编辑获取对象传入id
        editInfo(id) {//编辑
            var self = this;
            this.$http.get("GenerateLog", { params: { id: id } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataModel = res.data.model;
                        self.modalShow();//打开modal
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                    }
                }
            );
        },
        //删除对象
        delInfo(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据删除后不可恢复，确定要删除？</p>',
                onOk: () => {
                    this.$http.delete("GenerateLog", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '删除成功！', desc: false });
                                self.getPageData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        locked(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据将锁定，确定要锁定？</p>',
                onOk: () => {
                    this.$http.get("GenerateLog/GetLocked", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '锁定成功！', desc: false });
                                self.getPageData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据锁定失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        //保存方法
        save(modelname) {
            var self = this;
            this.$refs[modelname].validate((valid) => {
                if (valid) {
                    if (this.dataModel.Id === 0) {
                        this.$http.post('GenerateLog', this.dataModel).then(
                            function (res) {
                                switch (res.data.status * 1) {
                                    case 1:
                                        self.getPageData();//读取分页数据
                                        self.restModel(modelname);//重置model
                                        self.modalHide();//关闭modal
                                        self.$Notice.success({ title: '生成成功！', desc: false });
                                        break;
                                    case 0:
                                        self.$Modal.warning({ title: "提示信息", content: res.data.message });
                                        break;
                                    case -1:
                                        self.$Modal.warning({ title: "提示信息", content: "添加失败,请与管理员联系!" });
                                        break;
                                }
                            });
                    } else {
                        this.$http.put('GenerateLog', this.dataModel).then(
                            function (res) {
                                if (res.data.status == 1) {
                                    self.getPageData();//读取分页数据
                                    self.restModel(modelname);//重置model
                                    self.modalHide();//关闭modal
                                    self.$Notice.success({ title: '更新成功！', desc: false });
                                }
                                else {
                                    self.$Modal.warning({ title: "提示信息", content: "更新失败,请与管理员联系!" });
                                }
                            });
                    }
                }
            });
        },
        //编辑框打开
        modalShow() {
            this.showType = true;
        },
        //编辑框关闭
        modalHide() {
            this.showType = false;
        },
        //取消方法
        cancel(modelname) {
            this.$refs[modelname].resetFields();//重置model
            this.showType = false;//关闭modal
        },
        //重置model
        restModel(modelname) {
            this.$refs[modelname].resetFields();//重置model
        },
        //全选方法
        selectAll(selection) {
            this.dataIds = selection;
        },
        //checkbox选中方法
        selectSingel(selection, row) {
            this.dataIds = selection;
        },
        //checkbox取消选中方法
        selecChange(selection) {
            this.dataIds = selection;
        },
        //批量删除
        multiSelect() {
            var self = this;
            if (this.dataIds.length !== 0) {
                self.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>数据删除后不可恢复，确定要删除？</p>',
                    onOk: () => {
                        var ids = this.getDataIds(this.dataIds);
                        this.$http.post("GenerateLog/PostBatchDelete", ids).then(
                            function (res) {
                                if (res.data.status == 1) {
                                    self.dataIds = [];
                                    self.$Notice.success({ title: '删除成功！', desc: false });
                                    self.getPageData();
                                }
                                else {
                                    self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                                }
                            }
                        );
                    }
                });
            } else {
                self.$Modal.warning({ title: "提示信息", content: "请选择需要删除的数据!" });
            }

        },
        getDataIds(idList) {
            var ids = [];
            if (idList.length !== 0) {
                for (var i = 0; i < idList.length; i++) {
                    ids.push(idList[i].Id);
                }
            }
            return ids;
        }
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.getPageData();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
